<template>
    <div>
        <Row  class="user-info-con">
            <Col span="6">
                <span>手机号码：{{callUserInfo.telNo}}</span> 
            </Col>
            <Col span="6">
                <span>号码归属地：{{callUserInfo.mobileArea}}</span>  
            </Col>
            <Col span="6">
                <span>学生姓名：{{data.name}}</span> 
            </Col>
            <Col span="6">
                <span>生命周期：{{data.lifeCycle}}</span>
            </Col>
        </Row>
        <Row  class="user-info-con">
            <Col span="6">
                <span>用户关系：{{callUserRelationTheStudentInfo.relation}}</span>  
            </Col>
            <Col span="6">
                <span>英文名字：{{data.englishName}}</span>  
            </Col>
            <Col span="6">
                <span>学生ID：{{data.id}}</span>  
            </Col>
            <Col span="6">
                <span>年龄：{{data.Age}}岁</span>
            </Col>
        </Row>
        <Row  class="user-info-con">
            <Col span="12">
                <span>特殊备注：{{data.channelInfo}}</span> 
            </Col>
            <Col span="8">
                <span>渠道信息：{{data.channelName}}</span>
            </Col>
        </Row>
        <Row  class="user-info-con">
            <Col span="24">
                <p class="parentList">Parent: <span v-for="item in data.familyListData">{{item.relation | getChineseRealation}} - {{item.mobile}}; </span></p>
            </Col> 
        </Row>
        <!-- <Row  class="user-info-con">
            <Col span="24">
                <p>Parent: <span v-for="item in data.familyListData">{{item.relation | getChineseRealation}}-{{item.mobile}}; </span> </p>
            </Col> 
        </Row>
        <Row  class="user-info-con">
            <Col span="24">
                <p> 家庭地址: <span><Icon type="plus-round" @click.native="showAddFamilyAdressDiv"></Icon></span></p>
                <ul>  
                    <li v-for="item in data.addressData">
                        <span v-if="item.userName">Name:{{item.userName}}</span>
                        <span v-if="item.mobile">Phone:{{item.mobile}}</span>
                        <span v-if="item.province">province:{{item.province}}</span>
                        <span v-if="item.city">city:{{item.city}}</span>
                        <span v-if="item.district">district:{{item.district}}</span>
                        <span v-if="item.address">address:{{item.address}}</span>
                        <span><Icon type="edit" @click.native="showEditAdressLayer(item)"></Icon></span>
                     </li> 
                </ul>
            </Col>  
        </Row>-->
        <Row v-if="isHasMore" class="more-link-con">
            <Col span="24">
                <span class="more-link" @click="showUserMoreInfoLayer">点击查看更多</span>
            </Col>
        </Row>
       
    </div>
    </template>
<style scoped>
    .user-info-con {
        text-align: left;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    
    .user-info-con span {
        white-space: nowrap;
    }
    
    .more-link-con {
        position: relative;
        padding-bottom: 10px;
    }
    
    .more-link {
        position: absolute;
        right: 0;
        font-size: 12px;
        color: blue;
        cursor: pointer;
    }
    
    .parentList {
        display: flex;
        flex-direction: row;
    }
    
    .parentList span {
        margin-right: 10px;
    }
</style>
<script>
    import configService from 'service/configService.js'
    import userInfoMoreComponent from 'components/user/userInfoMore.js'
    import funs from '@/libs/func.js'
    import {
        mapGetters
    } from 'vuex'
    export default {
        name: 'studentInfo',
        props: {
            isHasMore: {
                type: Boolean,
                default: true
            },
            data: Object
        },

        computed: {
            ...mapGetters({
                callUserRelationTheStudentInfo: 'callUserRelationTheStudentInfo',
                callUserInfo: 'callUserInfo'
            })

        },

        filters: {
            getChineseRealation: function(value) {
                return funs.getChineseRealation(value)
            }
        },

        methods: {
            showUserMoreInfoLayer() {
                this.data.mobileArea = this.mobileArea
                userInfoMoreComponent.showUserInfoMore({
                    'data': this.data,
                    'remove': userInfoMoreComponent.remove
                })
            }


        }

    }
</script>